<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文页</title>
    <link rel="stylesheet" href="css/blog_common.css">
    <link rel="stylesheet" href="css/blog_content.css">
</head>
<body>
 <!-- 导航栏部分 -->
    <div class="nav">
        <img src="image/img_1.jpg" alt="">
        <span class="title">我的博客系统</span>
        <div class="space"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="blog_login.html">注销</a>
    </div>

    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧板块信息 -->
        <div class="container-left">
            <!-- 使用card 表示用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/img_1.jpg" alt="">
                <!-- 用户名 -->
                <h3>小清新</h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>1</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <!-- 右侧板块信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="tittle">我的第一篇博客</h3>
            <!-- 博客发布时间 -->
            <div class="date">2021-05-11</div>
            <!-- 博客正文 -->
            <div class="content">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto ducimus, doloremque necessitatibus voluptates in dolore ratione laborum, ipsam nihil magni, quam est amet labore incidunt optio aspernatur accusantium eum?
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem corporis repellendus consequatur tempore laborum, debitis minima sit est iusto quia magnam amet provident modi cum unde fugiat atque animi! Error?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis doloremque itaque nihil error aspernatur repellendus quas molestias explicabo quos? Corrupti architecto nam voluptas deserunt omnis itaque vitae consectetur dolores exercitationem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto ducimus, doloremque necessitatibus voluptates in dolore ratione laborum, ipsam nihil magni, quam est amet labore incidunt optio aspernatur accusantium eum?
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem corporis repellendus consequatur tempore laborum, debitis minima sit est iusto quia magnam amet provident modi cum unde fugiat atque animi! Error?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis doloremque itaque nihil error aspernatur repellendus quas molestias explicabo quos? Corrupti architecto nam voluptas deserunt omnis itaque vitae consectetur dolores exercitationem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto ducimus, doloremque necessitatibus voluptates in dolore ratione laborum, ipsam nihil magni, quam est amet labore incidunt optio aspernatur accusantium eum?
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem corporis repellendus consequatur tempore laborum, debitis minima sit est iusto quia magnam amet provident modi cum unde fugiat atque animi! Error?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis doloremque itaque nihil error aspernatur repellendus quas molestias explicabo quos? Corrupti architecto nam voluptas deserunt omnis itaque vitae consectetur dolores exercitationem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iusto ducimus, doloremque necessitatibus voluptates in dolore ratione laborum, ipsam nihil magni, quam est amet labore incidunt optio aspernatur accusantium eum?
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem corporis repellendus consequatur tempore laborum, debitis minima sit est iusto quia magnam amet provident modi cum unde fugiat atque animi! Error?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis doloremque itaque nihil error aspernatur repellendus quas molestias explicabo quos? Corrupti architecto nam voluptas deserunt omnis itaque vitae consectetur dolores exercitationem.
                </p>
            </div>
        </div>
    </div>
</body>
</html>